<template>
    <header>
       <div class="my-search">
          <div class="logo">零柒音乐</div>
          <input type="text" placeholder="搜索" @focus="addFocus">
          <div class="link">
              <router-link v-if="token" to="/my">{{ nickName | setnickName}}</router-link>
              <router-link v-else to="/login">登录</router-link>
          </div>
       </div>
    </header>
</template>

<script>
import { userInfo } from '../api/index'
export default {
    // 添加数据
    data(){
        return {
            token: false,
            nickName: "",
        }
    },
    // 过滤器
    filters: {
        setnickName(value){
            return value.slice(0,4)+"..."
        }
    },
    // 初始化钩子函数
    async created(){
        // 赋值
        let token = localStorage.getItem("UTOKEN");
        // 为了减少报错。多加一个判断
        if(token) {
            await userInfo({token}).then(
                content=>{
                    console.log(content);
                    let {code , result} = content;
                    if(code == 200) {
                         this.nickName = result[0].nickName;
                         this.token = token;
                    }
                }
            ).catch(err=>console.log(err))
        }
    },
    // 方法
    methods: {
        addFocus(){
            // 输入框获取焦点 跳转页面
            this.$router.push({path: '/search'})
        }
    }
}
</script>

<style lang="less" scoped>
@import '../common/less/varible.less';
header {
    font-size: 18px;
    border-bottom: 1px solid #f0f0f0;
}
.my-search {
    width: 100%;
    height: 50px;
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: @pad;
    box-sizing: border-box;
    .logo {
        width: 80px;
        flex-shrink: 0;
        color: @activeColor;
    }
    input[type='text'] {
        width: calc(100% - 140px);
        height: 34px;
        border-radius: 17px;
        border: 1px solid #ccc;
        flex-shrink: 0;
        padding-left: 10px;
        font-size: 16px;
    }
    .link {
        width: 60px;
        text-align: center;
        font-weight: normal;
        // font-family: Arial, Helvetica, sans-serif;
        // font-size: 15px;
    }
}
</style>